<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隧道环境监控养护系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f8fafc;
            color: #1e293b;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #94a3b8;
        }

        h1 {
            color: #1e40af;
            font-size: 2.2rem;
        }

        .status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .card {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #e2e8f0;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: #0f172a;
            margin-bottom: 15px;
            font-size: 1.5rem;
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 8px;
        }

        .sensor-value {
            font-size: 1.8rem;
            margin: 15px 0;
            padding: 10px;
            background-color: #f1f5f9;
            border-radius: 4px;
            text-align: center;
            font-weight: 500;
        }

        .warning {
            color: #d97706;
        }

        .danger {
            color: #dc2626;
        }

        .safe {
            color: #059669;
        }

        .control-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.2s ease;
            font-weight: 500;
        }

        .on-btn {
            background-color: #34d399;
            color: #064e3b;
        }

        .on-btn:hover {
            background-color: #10b981;
        }

        .off-btn {
            background-color: #f87171;
            color: #7f1d1d;
        }

        .off-btn:hover {
            background-color: #ef4444;
        }

        .refresh-btn {
            background-color: #93c5fd;
            color: #1e40af;
            margin-top: 10px;
        }

        .refresh-btn:hover {
            background-color: #60a5fa;
        }

        .status-text {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 0.9rem;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            color: #64748b;
            font-size: 0.9rem;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>隧道环境监控养护系统</h1>
        </header>

        <div class="status-grid">
            <!-- 温度监控 -->
            <div class="card">
                <h2>温度监控</h2>
                <div class="sensor-value" id="temperature">-- ℃</div>
                <button class="refresh-btn" onclick="refreshTemperature()">刷新温度</button>
            </div>

            <!-- 湿度监控 -->
            <div class="card">
                <h2>湿度监控</h2>
                <div class="sensor-value" id="humidity">-- %</div>
                <button class="refresh-btn" onclick="refreshHumidity()">刷新湿度</button>
            </div>

            <!-- 红外检测 -->
            <div class="card">
                <h2>红外人体检测</h2>
                <div class="sensor-value" id="infrared">
                    <span class="status-text" style="background-color:#f87171; color:#7f1d1d;">未检测</span>
                </div>
                <button class="refresh-btn" onclick="refreshInfrared()">刷新状态</button>
            </div>
            <!-- 空气质量检测 -->
            <div class="card">
                <h2>空气质量检测</h2>
                <div class="sensor-value" id="airQuality">-- μg/m³</div>
                <p class="quality-desc" id="qualityDesc">空气质量状态描述</p>
                <button class="refresh-btn" onclick="refreshAirQuality()">刷新空气质量</button>
            </div>
            <!-- 火焰检测 -->
            <div class="card">
                <h2>火焰检测</h2>
                <div class="sensor-value" id="flame">
                    <span class="status-text" style="background-color:#34d399; color:#064e3b;">无火焰</span>
                </div>
                <button class="refresh-btn" onclick="refreshFlame()">刷新状态</button>
            </div>

            <!-- 蜂鸣报警 -->
            <div class="card">
                <h2>蜂鸣报警器</h2>
                <div class="sensor-value" id="buzzerStatus">
                    <span class="status-text" style="background-color:#34d399; color:#064e3b;">关闭</span>
                </div>
                <div class="control-group">
                    <button class="on-btn" onclick="controlBuzzer('on')">开启报警</button>
                    <button class="off-btn" onclick="controlBuzzer('off')">关闭报警</button>
                </div>
            </div>

            <!-- 电灯控制 -->
            <div class="card">
                <h2>隧道照明</h2>
                <div class="sensor-value" id="lightStatus">
                    <span class="status-text" style="background-color:#f87171; color:#7f1d1d;">关闭</span>
                </div>
                <div class="control-group">
                    <button class="on-btn" onclick="controlLight('on')">开灯</button>
                    <button class="off-btn" onclick="controlLight('off')">毕登</button>
                </div>
            </div>

            <!-- 风扇控制 -->
            <div class="card">
                <h2>通风风扇</h2>
                <div class="sensor-value" id="fanStatus">
                    <span class="status-text" style="background-color:#f87171; color:#7f1d1d;">关闭</span>
                </div>
                <div class="control-group">
                    <button class="on-btn" onclick="controlFan('on')">开启</button>
                    <button class="off-btn" onclick="controlFan('off')">关闭</button>
                </div>
            </div>

            <!-- 水泵控制 -->
            <div class="card">
                <h2>排水水泵</h2>
                <div class="sensor-value" id="pumpStatus">
                    <span class="status-text" style="background-color:#f87171; color:#7f1d1d;">关闭</span>
                </div>
                <div class="control-group">
                    <button class="on-btn" onclick="controlPump('on')">开启</button>
                    <button class="off-btn" onclick="controlPump('off')">关闭</button>
                </div>
            </div>

            <!-- 闸门控制 -->
            <div class="card">
                <h2>隧道闸门</h2>
                <div class="sensor-value" id="gateStatus">
                    <span class="status-text" style="background-color:#34d399; color:#064e3b;">关闭</span>
                </div>
                <div class="control-group">
                    <button class="on-btn" onclick="controlGate('on')">开启</button>
                    <button class="off-btn" onclick="controlGate('off')">关闭</button>
                </div>
            </div>

            <!-- 备用电源 -->
            <div class="card">
                <h2>备用电源</h2>
                <div class="sensor-value" id="powerStatus">
                    <span class="status-text" style="background-color:#f87171; color:#7f1d1d;">未启用</span>
                </div>
                <div class="control-group">
                    <button class="on-btn" onclick="controlPower('on')">启用</button>
                    <button class="off-btn" onclick="controlPower('off')">停用</button>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>隧道环境监控养护系统 &copy; 2023 | 实时监控与控制终端</p>
        </div>
    </div>

    <script>
        // 温度刷新函数（仅在用户点击时触发）
        function refreshTemperature() {
            // 定义温度范围常量，便于维护
            const WARNING_THRESHOLD = 25; // 警告阈值
            const DANGER_THRESHOLD = 28;  // 危险阈值

            // 获取DOM元素
            const tempElement = document.getElementById('temperature');

            // 显示加载状态
            tempElement.textContent = "加载中...";
            tempElement.className = 'sensor-value';

            // 准备请求数据
            const requestData = {
                "key": 104
            };

            // 发送POST请求到服务器
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    // 可以添加其他需要的请求头，如认证信息
                    // 'Authorization': 'Bearer ' + token
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    // 检查响应状态
                    if (!response.ok) {
                        throw new Error(`HTTP错误，状态码: ${response.status}`);
                    }
                    // 解析JSON响应
                    return response.json();
                })
                .then(data => {
                    // 验证返回数据有效性（检查value字段）
                    if (typeof data.value !== 'number') {
                        throw new Error('服务器返回的数据格式不正确，未找到有效的value字段');
                    }

                    const temp = data.value.toFixed(1); // 使用value字段的值
                    const tempValue = parseFloat(temp);

                    // 更新温度显示
                    tempElement.textContent = `${temp} ℃`;

                    // 根据温度判断状态
                    if (tempValue > DANGER_THRESHOLD) {
                        tempElement.className = 'sensor-value danger';
                        // 温度过高时自动触发风扇开启
                        controlFan('on');
                        console.log('温度过高，已自动开启风扇');
                    } else if (tempValue > WARNING_THRESHOLD) {
                        tempElement.className = 'sensor-value warning';
                    } else {
                        tempElement.className = 'sensor-value safe';
                    }

                    console.log(`温度已刷新：${temp} ℃，状态：${tempValue > DANGER_THRESHOLD ? '危险' :
                        tempValue > WARNING_THRESHOLD ? '警告' : '正常'
                        }`);
                })
                .catch(error => {
                    // 处理请求错误，取消自动重试
                    console.error('获取温度数据失败:', error);
                    tempElement.textContent = "获取失败";
                    tempElement.className = 'sensor-value danger';
                });
        }
        // 湿度刷新函数
        function refreshHumidity() {
            // 获取显示湿度的DOM元素
            const humiElement = document.getElementById('humidity');

            // 显示加载状态
            humiElement.textContent = "加载中...";
            humiElement.className = 'sensor-value';

            // 准备请求数据
            const requestData = {
                "key": 105
            };

            // 发送POST请求到index.html
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    // 检查响应状态
                    if (!response.ok) {
                        throw new Error(`HTTP错误，状态码: ${response.status}`);
                    }
                    // 解析JSON响应
                    return response.json();
                })
                .then(data => {
                    // 验证返回数据有效性
                    if (typeof data.value !== 'number') {
                        throw new Error('服务器返回的数据格式不正确，需包含 { "value": 数值 } 形式数据');
                    }

                    const humi = data.value.toFixed(1);
                    // 更新湿度显示
                    humiElement.textContent = `${humi} %`;

                    // 根据湿度判断状态
                    if (humi > 65) {
                        humiElement.className = 'sensor-value danger';
                    } else if (humi > 55) {
                        humiElement.className = 'sensor-value warning';
                    } else {
                        humiElement.className = 'sensor-value safe';
                    }

                    console.log('湿度已刷新：', humi);
                })
                .catch(error => {
                    // 处理请求错误，无自动重试
                    console.error('获取湿度数据失败:', error);
                    humiElement.textContent = "获取失败";
                    humiElement.className = 'sensor-value danger';
                });
        }
        //空气质量
        function refreshAirQuality() {
            // 获取DOM元素
            const airQualityElement = document.getElementById('airQuality');
            const qualityDescElement = document.getElementById('qualityDesc');

            // 显示加载状态
            airQualityElement.textContent = "加载中...";
            airQualityElement.className = 'sensor-value';
            qualityDescElement.textContent = "正在获取数据...";

            // 准备请求数据，key修改为109
            const requestData = {
                "key": 109  // 空气质量检测对应的key更新为109
            };

            // 发送POST请求到服务器
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    // 检查响应状态
                    if (!response.ok) {
                        throw new Error(`HTTP错误，状态码: ${response.status}`);
                    }
                    // 解析JSON响应
                    return response.json();
                })
                .then(data => {
                    // 验证返回数据有效性
                    if (typeof data.value !== 'number') {
                        throw new Error('服务器返回的数据格式不正确，需包含 { "value": 数值 } 形式数据');
                    }

                    const airQualityValue = data.value.toFixed(1);
                    // 更新空气质量数值显示
                    airQualityElement.textContent = `${airQualityValue} μg/m³`;

                    // 根据空气质量数值判断状态并更新描述
                    let statusClass = '';
                    let statusDesc = '';

                    if (airQualityValue <= 50) {
                        statusClass = 'safe';
                        statusDesc = '空气质量优，适合正常活动';
                    } else if (airQualityValue <= 100) {
                        statusClass = 'safe';
                        statusDesc = '空气质量良好，可正常活动';
                    } else if (airQualityValue <= 150) {
                        statusClass = 'warning';
                        statusDesc = '空气质量轻度污染，敏感人群需注意';
                    } else if (airQualityValue <= 200) {
                        statusClass = 'warning';
                        statusDesc = '空气质量中度污染，建议减少户外活动';
                    } else {
                        statusClass = 'danger';
                        statusDesc = '空气质量重度污染，应避免户外活动';
                    }

                    // 更新样式和描述
                    airQualityElement.className = `sensor-value ${statusClass}`;
                    qualityDescElement.textContent = statusDesc;

                    console.log(`空气质量已刷新：${airQualityValue} μg/m³，${statusDesc}`);
                })
                .catch(error => {
                    // 处理请求错误，无自动重试
                    console.error('获取空气质量数据失败:', error);
                    airQualityElement.textContent = "获取失败";
                    airQualityElement.className = 'sensor-value danger';
                    qualityDescElement.textContent = "数据获取失败，请重试";
                });
        }

        // 红外检测刷新函数
        function refreshInfrared() {
            // 获取DOM元素
            const infraredElement = document.getElementById('infrared');

            // 显示加载状态
            infraredElement.innerHTML = '<span class="status-text" style="background-color:#93c5fd; color:#1e40af;">加载中...</span>';

            // 准备请求数据
            const requestData = {
                "key": 101
            };

            // 发送POST请求到服务器
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    // 检查响应状态
                    if (!response.ok) {
                        throw new Error(`HTTP错误，状态码: ${response.status}`);
                    }
                    // 解析JSON响应
                    return response.json();
                })
                .then(data => {
                    // 验证返回数据有效性
                    if (typeof data.value === 'undefined') {
                        throw new Error('服务器返回的数据格式不正确，需包含 { "value": 数值 } 形式数据');
                    }

                    // 根据服务器返回的value值更新显示
                    // 假设value为1表示检测到人，0表示未检测到
                    if (data.value === 1) {
                        infraredElement.innerHTML = '<span class="status-text" style="background-color:#fbbf24; color:#92400e;">有人</span>';
                        console.log('红外检测已刷新：有人');
                    } else {
                        infraredElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">未检测</span>';
                        console.log('红外检测已刷新：无人');
                    }
                })
                .catch(error => {
                    // 处理请求错误，无自动重试
                    console.error('获取红外检测数据失败:', error);
                    infraredElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">获取失败</span>';
                });
        }
        // 火焰检测刷新函数
        function refreshFlame() {
            // 获取显示火焰检测状态的 DOM 元素
            const flameElement = document.getElementById('flame');
            // 显示加载状态
            flameElement.innerHTML = '<span class="status-text" style="background-color:#93c5fd; color:#1e40af;">加载中...</span>';
            // 准备请求数据
            const requestData = {
                "key": 108
            };
            // 发送 POST 请求到服务器，这里假设请求地址为 'index.html'，实际需结合后端情况确认
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    // 检查响应状态
                    if (!response.ok) {
                        throw new Error(`HTTP 错误，状态码: ${response.status}`);
                    }
                    // 解析 JSON 响应
                    return response.json();
                })
                .then(data => {
                    // 验证返回数据有效性
                    if (typeof data.value === 'undefined') {
                        throw new Error('服务器返回的数据格式不正确，需包含 { "value": 数值 } 形式数据');
                    }

                    // 根据服务器返回的 value 值更新显示
                    if (data.value === 1) {
                        flameElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">检测到火焰</span>';
                        // 检测到火焰时自动触发报警
                        controlBuzzer('on');
                        console.log('火焰检测已刷新：有火焰');
                    } else {
                        flameElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">无火焰</span>';
                        console.log('火焰检测已刷新：无火焰');
                    }
                })
                .catch(error => {
                    // 处理请求错误，无自动重试
                    console.error('获取火焰检测数据失败:', error);
                    flameElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">获取失败</span>';
                });
        }
        // 页面加载时自动获取所有模块状态
        window.onload = function () {
            // 自动获取各模块初始状态
            fetchModuleStatus();
        };

        // 统一获取所有模块状态的函数（页面加载时调用）
        function fetchModuleStatus() {
            // 发送获取状态的请求（假设服务器可通过特定key返回所有状态）
            const requestData = {
                "key": 100,
                "action": "getStatus" // 告知服务器需要返回所有模块状态
            };

            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误，状态码: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 假设服务器返回所有模块状态，格式如：
                    // { buzzer: 1, light: 0, fan: 1, pump: 0, gate: 1, power: 0 }
                    // 根据返回数据更新各模块显示
                    updateBuzzerStatus(data.buzzer);
                    updateLightStatus(data.light);
                    updateFanStatus(data.fan);
                    updatePumpStatus(data.pump);
                    updateGateStatus(data.gate);
                    updatePowerStatus(data.power);
                })
                .catch(error => {
                    console.error('获取初始状态失败:', error);
                });
        }

        // 蜂鸣器控制函数
        function controlBuzzer(status) {
            const buzzerElement = document.getElementById('buzzerStatus');

            // 显示加载状态，避免用户重复操作
            buzzerElement.innerHTML = '<span class="status-text" style="background-color:#93c5fd; color:#1e40af;">处理中...</span>';

            // 明确设置请求value值：开启为1，关闭为0
            const requestValue = status === 'on' ? 1 : 0;

            // 构造请求数据
            const requestData = {
                "key": 102,
                "value": requestValue,  // 直接使用明确的value值
                "device": "buzzer"
            };

            // 发送POST请求到服务器，同时打印发送的数据用于调试
            console.log('发送请求数据:', requestData);
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    // 检查HTTP响应状态是否正常
                    if (!response.ok) {
                        throw new Error(`请求失败，状态码: ${response.status}`);
                    }
                    // 解析服务器返回的JSON数据
                    return response.json();
                })
                .then(data => {
                    console.log('收到服务器响应:', data);
                    // 验证服务器返回数据格式（必须包含value字段，且为0或1）
                    if (typeof data !== 'object' || data === null || typeof data.value !== 'number' || !([0, 1].includes(data.value))) {
                        throw new Error(`服务器返回无效数据: ${JSON.stringify(data)}，需为{"value":0}或{"value":1}`);
                    }

                    // 根据服务器返回的value更新网页显示
                    if (data.value === 1) {
                        buzzerElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">报警中</span>';
                        console.log('蜂鸣器已开启（服务器确认）');
                    } else {
                        buzzerElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">关闭</span>';
                        console.log('蜂鸣器已关闭（服务器确认）');
                    }
                })
                .catch(error => {
                    // 处理所有可能的错误（网络异常、数据格式错误等）
                    console.error('蜂鸣器控制失败:', error.message);
                    buzzerElement.innerHTML = '<span class="status-text" style="background-color:#fbbf24; color:#92400e;">操作失败</span>';
                });
        }

        // 电灯控制函数
        function controlLight(status) {
            const lightElement = document.getElementById('lightStatus');

            // 显示加载状态，提供操作反馈
            lightElement.innerHTML = '<span class="status-text" style="background-color:#93c5fd; color:#1e40af;">处理中...</span>';

            // 构造请求数据：统一key=100，value=1（开启）或0（关闭）
            const requestData = {
                "key": 103,
                "value": status === 'on' ? 1 : 0,
                "device": "light" // 明确指定控制设备为电灯
            };
            // 发送POST请求到服务器
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    // 验证HTTP响应状态
                    if (!response.ok) {
                        throw new Error(`请求失败，状态码: ${response.status}`);
                    }
                    // 解析服务器返回的JSON数据
                    return response.json();
                })
                .then(data => {
                    // 严格验证服务器响应格式：必须包含value字段，且值为0或1
                    if (typeof data.value !== 'number' || !([0, 1].includes(data.value))) {
                        throw new Error(`无效响应格式，需返回{"value":0}或{"value":1}，实际收到: ${JSON.stringify(data)}`);
                    }

                    // 根据服务器返回的value更新显示状态
                    if (data.value === 1) {
                        // 服务器确认开启成功
                        lightElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">开启</span>';
                        console.log('电灯已开启（服务器确认）');
                    } else {
                        // 服务器确认关闭成功
                        lightElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">关闭</span>';
                        console.log('电灯已关闭（服务器确认）');
                    }
                })
                .catch(error => {
                    // 错误处理：显示操作失败并输出详细错误信息
                    console.error('电灯控制失败:', error.message);
                    lightElement.innerHTML = '<span class="status-text" style="background-color:#fbbf24; color:#92400e;">操作失败</span>';
                });
        }
        // 风扇控制函数
        function controlFan(status) {
            const fanElement = document.getElementById('fanStatus');

            // 显示加载状态，提供即时反馈
            fanElement.innerHTML = '<span class="status-text" style="background-color:#93c5fd; color:#1e40af;">处理中...</span>';

            // 构造请求数据：统一key=100，value=1（开启）或0（关闭）
            const requestData = {
                "key": 106,
                "value": status === 'on' ? 1 : 0,
                "device": "fan" // 明确指定控制设备为风扇
            };

            // 发送POST请求到服务器
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    // 验证HTTP响应状态
                    if (!response.ok) {
                        throw new Error(`请求失败，状态码: ${response.status}`);
                    }
                    // 解析服务器返回的JSON数据
                    return response.json();
                })
                .then(data => {
                    // 严格验证响应格式：必须包含value字段，且值为0或1
                    if (typeof data.value !== 'number' || !([0, 1].includes(data.value))) {
                        throw new Error(`无效响应格式，需返回{"value":0}或{"value":1}，实际收到: ${JSON.stringify(data)}`);
                    }

                    // 根据服务器返回的value直接更新显示状态
                    if (data.value === 1) {
                        // 服务器确认开启成功
                        fanElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">运行中</span>';
                        console.log('风扇已开启（服务器确认）');
                    } else {
                        // 服务器确认关闭成功
                        fanElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">关闭</span>';
                        console.log('风扇已关闭（服务器确认）');
                    }
                })
                .catch(error => {
                    // 错误处理：显示操作失败并输出详细信息
                    console.error('风扇控制失败:', error.message);
                    fanElement.innerHTML = '<span class="status-text" style="background-color:#fbbf24; color:#92400e;">操作失败</span>';
                });
        }

        // 水泵控制函数
        function controlPump(status) {
            const pumpElement = document.getElementById('pumpStatus');

            // 显示加载状态
            pumpElement.innerHTML = '<span class="status-text" style="background-color:#93c5fd; color:#1e40af;">处理中...</span>';

            // 准备请求数据
            const requestData = {
                "key": 107,
                "value": status === 'on' ? 1 : 0,
                "device": "pump"
            };

            // 发送POST请求到服务器
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`请求失败，状态码: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 验证服务器响应格式
                    if (typeof data.value !== 'number' || !([0, 1].includes(data.value))) {
                        throw new Error(`无效响应格式，需返回{"value":0}或{"value":1}，实际收到: ${JSON.stringify(data)}`);
                    }
                    // 根据服务器返回的value直接更新显示
                    if (data.value === 1) {
                        pumpElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">运行中</span>';
                        console.log('水泵已开启（服务器确认）');
                    } else {
                        pumpElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">关闭</span>';
                        console.log('水泵已关闭（服务器确认）');
                    }
                })
                .catch(error => {
                    console.error('水泵控制失败:', error.message);
                    pumpElement.innerHTML = '<span class="status-text" style="background-color:#fbbf24; color:#92400e;">操作失败</span>';
                });
        }
        // 闸门控制函数
        function controlGate(status) {
            const gateElement = document.getElementById('gateStatus');

            // 显示加载状态
            gateElement.innerHTML = '<span class="status-text" style="background-color:#93c5fd; color:#1e40af;">处理中...</span>';

            // 准备请求数据
            const requestData = {
                "key": 301,
                "value": status === 'on' ? 1 : 0,
                "device": "gate"
            };

            // 发送POST请求到服务器
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`请求失败，状态码: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 验证服务器响应格式
                    if (typeof data.value !== 'number' || !([0, 1].includes(data.value))) {
                        throw new Error(`无效响应格式，需返回{"value":0}或{"value":1}，实际收到: ${JSON.stringify(data)}`);
                    }

                    // 根据服务器返回的value直接更新显示
                    if (data.value === 1) {
                        gateElement.innerHTML = '<span class="status-text" style="background-color:#fbbf24; color:#92400e;">开启</span>';
                        console.log('闸门已开启（服务器确认）');
                    } else {
                        gateElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">关闭</span>';
                        console.log('闸门已关闭（服务器确认）');
                    }
                })
                .catch(error => {
                    console.error('闸门控制失败:', error.message);
                    gateElement.innerHTML = '<span class="status-text" style="background-color:#fbbf24; color:#92400e;">操作失败</span>';
                });
        }

        // 备用电源控制函数
        function controlPower(status) {
            const powerElement = document.getElementById('powerStatus');

            // 显示加载状态
            powerElement.innerHTML = '<span class="status-text" style="background-color:#93c5fd; color:#1e40af;">处理中...</span>';

            // 准备请求数据（保持key=302的特殊设定）
            const requestData = {
                "key": 302,
                "value": status === 'on' ? 1 : 0,
                "device": "power"
            };

            // 发送POST请求到服务器
            fetch('index.html', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`请求失败，状态码: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // 严格验证服务器响应格式
                    if (typeof data.value !== 'number' || (data.value !== 0 && data.value !== 1)) {
                        throw new Error(`无效响应格式，预期{"value":0}或{"value":1}，实际收到: ${JSON.stringify(data)}`);
                    }

                    // 根据服务器返回的value直接更新显示状态
                    if (data.value === 1) {
                        powerElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">启用中</span>';
                        console.log('备用电源已启用（服务器确认）');
                    } else {
                        powerElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">未启用</span>';
                        console.log('备用电源已停用（服务器确认）');
                    }
                })
                .catch(error => {
                    console.error('备用电源控制失败:', error.message);
                    powerElement.innerHTML = '<span class="status-text" style="background-color:#fbbf24; color:#92400e;">操作失败</span>';
                });
        }
        // 以下为状态更新辅助函数（根据服务器返回值更新UI）
        function updateBuzzerStatus(value) {
            const buzzerElement = document.getElementById('buzzerStatus');
            if (value === 1) {
                buzzerElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">报警中</span>';
                console.log('蜂鸣器状态：开启');
            } else {
                buzzerElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">关闭</span>';
                console.log('蜂鸣器状态：关闭');
            }
        }

        function updateLightStatus(value) {
            const lightElement = document.getElementById('lightStatus');
            if (value === 1) {
                lightElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">开启</span>';
                console.log('电灯状态：开启');
            } else {
                lightElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">关闭</span>';
                console.log('电灯状态：关闭');
            }
        }

        function updateFanStatus(value) {
            const fanElement = document.getElementById('fanStatus');
            if (value === 1) {
                fanElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">运行中</span>';
                console.log('风扇状态：开启');
            } else {
                fanElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">关闭</span>';
                console.log('风扇状态：关闭');
            }
        }

        function updatePumpStatus(value) {
            const pumpElement = document.getElementById('pumpStatus');
            if (value === 1) {
                pumpElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">运行中</span>';
                console.log('水泵状态：开启');
            } else {
                pumpElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">关闭</span>';
                console.log('水泵状态：关闭');
            }
        }

        function updateGateStatus(value) {
            const gateElement = document.getElementById('gateStatus');
            if (value === 1) {
                gateElement.innerHTML = '<span class="status-text" style="background-color:#fbbf24; color:#92400e;">开启</span>';
                console.log('闸门状态：开启');
            } else {
                gateElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">关闭</span>';
                console.log('闸门状态：关闭');
            }
        }

        function updatePowerStatus(value) {
            const powerElement = document.getElementById('powerStatus');
            if (value === 1) {
                powerElement.innerHTML = '<span class="status-text" style="background-color:#34d399; color:#064e3b;">启用中</span>';
                console.log('备用电源状态：开启');
            } else {
                powerElement.innerHTML = '<span class="status-text" style="background-color:#f87171; color:#7f1d1d;">未启用</span>';
                console.log('备用电源状态：关闭');
            }
        }

        // 页面加载时不自动刷新数据，仅初始化显示
        window.onload = function () {
            // 初始化显示默认值，不主动获取数据
            document.getElementById('temperature').textContent = "-- ℃";
            document.getElementById('humidity').textContent = "-- %";
            document.getElementById('airQuality').textContent = "-- μg/m³";
        };
    </script>
</body>

</html>